<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Circular Motion</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Parameters ---
    const cx = 250;
    const cy = 270;
    const R = 150;
    const r = 50;
    const dotRadius = 3;
    const lineWidth = 2;
    const headlen = 12;

    // Center of the small circle (disc)
    const scx = cx;
    const scy = cy - (R - r);

    // Helper function to draw a filled arrow
    function drawFilledArrow(ctx, fromx, fromy, tox, toy, headlen) {
        const angle = Math.atan2(toy - fromy, tox - fromx);
        // Main line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        // Arrowhead
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.restore();
    }

    // --- Drawing ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = lineWidth;

    // 1. Draw large ring
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();
    // Center dot for large ring
    ctx.beginPath();
    ctx.arc(cx, cy, dotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 2. Draw small disc
    ctx.beginPath();
    ctx.arc(scx, scy, r, 0, 2 * Math.PI);
    ctx.stroke();
    // Center dot for small disc
    ctx.beginPath();
    ctx.arc(scx, scy, dotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 3. Draw dashed lines for the 90-degree angle
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 1.5;
    // Vertical line connecting centers
    ctx.beginPath();
    ctx.moveTo(scx, scy);
    ctx.lineTo(cx, cy);
    ctx.stroke();
    // Horizontal line for velocity direction
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + 60, cy);
    ctx.stroke();
    ctx.restore();
    
    // 4. Draw 90-degree angle symbol and text
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    const angleSymbolRadius = 25;
    ctx.arc(cx, cy, angleSymbolRadius, -Math.PI / 2, 0);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(cx, cy - 10);
    ctx.lineTo(cx + 10, cy - 10);
    ctx.lineTo(cx + 10, cy);
    ctx.stroke();

    ctx.font = '24px Arial';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('90°', cx + 30, cy - 10);
    ctx.restore();

    // Reset line width for main elements
    ctx.lineWidth = lineWidth;

    // 5. Draw radius R
    const angleR_rad = 5 * Math.PI / 4; // 225 degrees
    const endRx = cx + R * Math.cos(angleR_rad);
    const endRy = cy + R * Math.sin(angleR_rad);
    drawFilledArrow(ctx, cx, cy, endRx, endRy, headlen);
    ctx.font = 'italic 28px Times New Roman';
    ctx.fillText('R', cx - 100, cy + 75);

    // 6. Draw radius r
    const angle_r_rad = 5 * Math.PI / 4; // 225 degrees
    const end_rx = scx + r * Math.cos(angle_r_rad);
    const end_ry = scy + r * Math.sin(angle_r_rad);
    drawFilledArrow(ctx, scx, scy, end_rx, end_ry, headlen);
    ctx.font = 'italic 28px Times New Roman';
    ctx.fillText('r', scx - 50, scy + 10);

    // 7. Draw velocity vector v₀
    const v_start_x = cx;
    const v_end_x = cx + R + 25;
    drawFilledArrow(ctx, v_start_x, cy, v_end_x, cy, headlen + 2);
    // Draw v₀ label
    ctx.font = 'italic bold 28px Times New Roman';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('v', v_end_x + 10, cy);
    ctx.font = 'italic bold 20px Times New Roman';
    ctx.fillText('0', v_end_x + 25, cy + 8);

</script>
</body>
</html>